<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toast测试页面</title>
    <script src="js/tailwindcss-3.4.17.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#10b981',
                        'primary-dark': '#059669',
                        secondary: '#06b6d4',
                        accent: '#f59e0b',
                        danger: '#ef4444',
                        neutral: '#f9fafb',
                        'text-primary': '#1f2937',
                        'text-secondary': '#6b7280'
                    }
                }
            }
        }
    </script>
    <link rel="stylesheet" href="css/all.min.css">
    <link rel="stylesheet" href="css/common.css">
</head>
<body class="bg-gray-100 p-8">
    <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6">
        <h1 class="text-2xl font-bold mb-6 text-center">Toast消息测试</h1>
        
        <div class="space-y-4">
            <button onclick="testBasicToast()" class="w-full bg-primary text-white py-2 px-4 rounded-lg hover:bg-primary-dark transition-colors">
                测试基本Toast
            </button>
            
            <button onclick="testMultipleToast()" class="w-full bg-secondary text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition-colors">
                测试多个Toast
            </button>
            
            <button onclick="testClosableToast()" class="w-full bg-accent text-white py-2 px-4 rounded-lg hover:bg-yellow-600 transition-colors">
                测试可关闭Toast
            </button>
            
            <button onclick="testAllTypes()" class="w-full bg-danger text-white py-2 px-4 rounded-lg hover:bg-red-600 transition-colors">
                测试所有类型
            </button>
            
            <button onclick="clearAllToasts()" class="w-full bg-gray-500 text-white py-2 px-4 rounded-lg hover:bg-gray-600 transition-colors">
                清除所有Toast
            </button>
        </div>
    </div>

    <script src="js/common.js"></script>
    <script>
        function testBasicToast() {
            CommonUtils.showToast('这是一个基本Toast消息', 'info');
        }
        
        function testMultipleToast() {
            CommonUtils.showToast('第一个消息', 'info');
            setTimeout(() => CommonUtils.showToast('第二个消息', 'success'), 500);
            setTimeout(() => CommonUtils.showToast('第三个消息', 'warning'), 1000);
            setTimeout(() => CommonUtils.showToast('第四个消息', 'error'), 1500);
        }
        
        function testClosableToast() {
            CommonUtils.showToast('这是一个可关闭的消息', 'info', { closable: true, duration: 0 });
        }
        
        function testAllTypes() {
            CommonUtils.showToast('信息消息', 'info');
            setTimeout(() => CommonUtils.showToast('成功消息', 'success'), 200);
            setTimeout(() => CommonUtils.showToast('警告消息', 'warning'), 400);
            setTimeout(() => CommonUtils.showToast('错误消息', 'error'), 600);
        }
        
        function clearAllToasts() {
            CommonUtils.clearAllToasts();
        }
    </script>
</body>
</html>
